<template>
    <div>
        <el-header style="background-color:whitesmoke">
            <el-button @click="add()" type="primary" icon="el-icon-document-add">添加年级</el-button>
            <el-button @click="updateStu()" type="primary" icon="el-icon-s-promotion">同步数据</el-button>
        </el-header>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="wx_id"
                    label="微信id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="px"
                    label="排序"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="college_name"
                    label="学院名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="collegeId"
                    label="学院ID"
                    width="120">
            </el-table-column>
            <el-table-column
                prop="major_name"
                label="专业名称"
                >
        </el-table-column>
            <el-table-column
                    prop="majorId"
                    label="专业ID"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small">修改</el-button>
                    <el-button @click="deleteCollege(scope.row)" type="danger" icon="el-icon-delete"  size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                page-size="2"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>


</template>

<script>
    export default {
        methods: {
            updateStu(){
                const _this=this
                axios.get('http://localhost:8181/college/createDepartment').then(function (resp) {
                    console.log(resp)
                    _this.$alert('部门同步成功', '成功', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                })
            },
            add(){
                this.$router.push({
                    path:'/addGrade'
                })
            },
            edit(row) {
                this.$router.push({
                    path:'/updateGrade',
                    query:{
                        id:row.id
                    }
                })
            },
            deleteCollege(row){
                const _this=this
                axios.delete('http://localhost:8181/college/deleteGradeById/'+row.id).then(function (resp) {
                    _this.$alert('部门：'+row.name+'删除成功', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    });
                })
            },
            page(currentPage){
                // alert(currentPage)
                const _this=this
                axios.get('http://localhost:8181/college/searchGrade/'+currentPage+'/8').then(function (resp) {
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
            }
        },
        created() {
            // _this全局的this
            const _this=this
            axios.get("http://localhost:8181/college/searchGrade/1/8").then(function (resp) {
                _this.tableData=resp.data.content
                console.log(resp.data)
                _this.total=resp.data.totalElements
            })
        },
        data() {
            return {
                total:null,
                tableData: [{
                    id: 'B1001',
                    name: '软件工程',
                    wx_id: '7',
                    px:'0',
                    collegeId:'0',
                    college_name:'0',
                    majorId:'0',
                    major_name:'0',

                },
                    {
                        id: 'B1002',
                        name: '网络工程',
                        wx_id: '8',
                        px:'0',
                        collegeId:'0'
                    },
                    {
                        id: 'B1003',
                        name: '纺织工程',
                        wx_id: '9',
                        px:'0',
                        collegeId:'0'
                    },
                    {
                        id: 'B1004',
                        name: '机械工程',
                        wx_id: '10',
                        px:'0',
                        collegeId:'0'
                    }
                ]
            }
        }
    }
</script>